ember-cli-node-assets

ember-cli-node-assets

Incorporate stylesheets, images, globals-style scripts and other assets directly from node modules into your Ember app or addon.

Usage

In an application's ember-cli-build.js:

var app = new EmberApp(defaults, {
  nodeAssets: {
    // node asset options
  }
});

In an addon's index.js:

module.exports = {
  name: 'my-addon',
  options: {
    nodeAssets: {
      // node asset options
    }
  }
}

Module Configuration

Each key in the nodeAssets hash corresponds to the name of a node module you want to include assets from. For example, the dummy app in this repo uses slick-carousel as a proof of concept and has the following configuration:

nodeAssets: {
  'slick-carousel': {
    srcDir: 'slick',
    import: ['slick.js', 'slick.css', 'slick-theme.css'],
    public: ['ajax-loader.gif', 'fonts/*']
  }
}

Each key should contain a hash of the configuration for the corresponding module, with the options specified below. All configured paths are relative to that module's directory within the consuming app or addon's node_modules directory.

If your required assets depend on runtime configuration (e.g. if you have an addon with configurable theme support), you may specify a function that returns a configuration hash.

nodeAssets: {
  'some-node-module': function() {
    // Within this function, `this` refers to your app or addon instance
    return {
      import: ['js/widget.js'],
      public: ['css/widget-theme-' + this.addonOptions.theme + '.css']
    };
  }
}

For addons, you'll want to make sure this configuration is available before your base included() hook is invoked. For instance, you might do something like:

included: function(parent) {
  this.addonOptions = parent.options && parent.options.myAddon || {};
  this.addonOptions.theme = this.addonOptions.theme || 'light';
  this._super.included.apply(this, arguments);
}

Imported Assets

Assets that should be imported into your app or addon's vendor.js or vendor.css can be configured via a hash under the import key. Options:

• include: an array of files that should be imported and concatenated into the served JS or CSS files. Each file may be:
  • a string representing the path to file that should be imported
  • a hash containing the following keys:
    • path: the location of the file (required)
    • sourceMap: the location of an existing sourceMap for that file (optional)
    • any other options to be specified to app.import, like type: 'test' or prepend: true (optional)
• srcDir (optional): the source directory (relative to the module's directory) from which files should be included
• processTree (optional): a function to perform any necessary processing on the Broccoli tree containing the given files before they are imported

Note that you may pass an array of strings as the value for import instead of a hash as a shorthand for only specifying an include property, as in the usage example above.

Public Assets

Assets that do not get built into the application itself but rather must be publicly available (e.g. images or webfonts) can be configured via a hash under the public key. Options:

• include: an array of strings representing the files to be included in the public directory. Note that unlike with imported files, these strings may be path globs
• srcDir (optional): the source directory (relative to the module's directory) from which files should be included
• destDir (optional): the location in dist where your public assets will be placed. Defaults to assets.
• processTree (optional): a function to perform any necessary processing on the Broccoli tree containing the given files before they are moved into dist

Note that you may pass an array of strings as the value for public instead of a hash as a shorthand for only specifying an include property, as in the usage example above.

Shared Source directory

If your public and imported assets share a common source directory (e.g. dist or build), you may specify that as srcDir on the root configuration hash for the module, as in the usage example above.

Disabling Modules

If you have a module that you'd only like to include in certain situations, like an error reporting library you only want in production builds, you can include an enabled flag in the configuration for that model.

nodeAssets: {
  'bug-reporter': {
    enabled: EmberApp.env() === 'production',
    import: ['bug-reporter.js']
  }
}